<script setup lang="ts" name="EditRange">
import { useDesignerStore } from '@/store/bigScreen/designerStore'
import { useSizeStyle } from '../hooks/useStyle'
import { storeToRefs } from 'pinia'

const designStore = useDesignerStore()

const { editCanvas, editCanvasConfig } = storeToRefs(designStore)

const size: any = computed(() => {
  return {
    w: editCanvasConfig.value.width,
    h: editCanvasConfig.value.height
  }
})

const rangeStyle = computed(() => {
  // 缩放
  const scale = {
    transform: `scale(${editCanvas.value.scale})`
  }
  return { ...useSizeStyle(size.value), ...scale }
})
</script>

<template>
  <div class="ck-edit-range" :style="rangeStyle">
    <slot></slot>
  </div>
</template>

<style scoped lang="scss">
.ck-edit-range{
  position: relative;
  overflow: hidden;
  transform-origin: left top;
  transition: all 0.4s;
}
</style>
